<template>
  <nav>
      <p class="title">猫眼电影</p>
    <ul>
      <!-- 
        路由在当前匹配到to规则一样的时候 vue-router会给router-link添加一个样式名称
        默认名称为 router-link-active
        但是默认名称有点的长，不好记所以自定义了 active-class  自定义匹配路由和to相同时名称
       -->
      <router-link tag="li" exact to="/movies/nowplaying" active-class="active">
        <span>正在热映</span>
      </router-link>
      <router-link tag="li" to="/movies/comingsoon" active-class="active">
        <span>即将上映</span>
      </router-link>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.title{
    text-align: center;
    background:red;
}
nav p {
  color: aliceblue;
}
nav {
  width: 100%;
  height: 50px;
  line-height: 50px;
  
  ul {
    display: flex;
    text-align: center;
    border-bottom: 1px solid rgba(212, 186, 186, 0.712);
    li {
      flex: 1;
      display: flex;
      justify-content: center;
      font-size:15px;
          font-weight: bold;

      &.active{
        span{
          width: 40%;
          border-bottom: 2px solid red;
          display: block;
          color:red;
          
          
        }
      }
      
    }
  }
}
</style>

